<style scoped>
.buttonMenu {
  position: relative;
  float: left;
}
</style>

<template>
  <div>
    <div>
      <Button
        style="float: left; margin-right: 8px"
        icon="ios-add"
        type="primary"
        shape="circle"
        @click="modal1 = true"
      >添加专业</Button>
      <Modal
        v-model="modal1"
        title="录入专业基本信息"
        @on-ok="addMajor()"
        :styles="{top: '10px'}"
        width="700"
        scrollable
      >
        <!-- 子组件设置key，使每次打开都是一个新组件，达到清空表单目的 -->
        <div>
          <majorinfo @getMajor="getMajor" :key="new Date().getTime()"></majorinfo>
        </div>
      </Modal>
      <Button
        style="float: left; margin-right: 8px;color: #fff;background-color:gray;border-color: gray"
        icon="ios-settings"
        shape="circle"
        @click="initmodal2()"
      >设置主考院校</Button>
      <Modal
        v-model="modal2"
        title="设置主考院校"
        @on-ok="setSubjectSchool(subjectschool,selected)"
        width="380"
        scrollable
      >
        <span>主考院校（第一个选择则为第一主考院校）：</span>
        <br />
        <br />
        <Select v-model="subjectschool" style="width:300px" multiple filterable>
          <Option v-for="item in schoolList" :value="item.scId" :key="item.scId">{{ item.scName }}</Option>
        </Select>
      </Modal>

      <Button
        @click="Active(selected)"
        style="margin-right: 8px; float: left;"
        type="info"
        shape="circle"
      >
        <Icon size="18" type="ios-checkmark" />启用
      </Button>
      <Button
        @click="willStop(selected)"
        style="margin-right: 8px; float: left;"
        type="warning"
        icon="ios-alert-outline"
        shape="circle"
      >即将停考</Button>
      <Button
        @click="Stop(selected)"
        style="margin-right: 8px; float: left;"
        type="error"
        shape="circle"
      >
        <Icon size="18" type="ios-close" />停考
      </Button>
      <br />
      <br />
      <br />
      <Table border :columns="columnshead" :data="datat" @on-selection-change="Selected">
        <!-- 修改项 -->
        <!-- mjName -->
        <template slot-scope="{ row, index }" slot="mjName">
          <Input type="text" v-model="modifymajor.mjName" v-if="editIndex === index" />
          <router-link
            v-else
            :to="{name: 'SetMajorCourse' , query: {mjName:row.mjName,mjId:row.mjId,mvId:row.mvId}}"
          >
            <Tooltip
              :content="'设置'+row.mjName+'专业课程'"
              theme="light"
              placement="right"
              transfer
            >{{ row.mjName }}</Tooltip>
          </router-link>
        </template>
        <!-- mvId -->
        <template slot-scope="{ row, index }" slot="mvId">
          <Select v-model="modifymajor.mvId" filterable v-if="editIndex === index" transfer>
            <Option v-for="item in mvIdList" :value="item.mvId" :key="item.mvId">{{item.mvName}}</Option>
          </Select>
          <span v-else>{{ row.mvId }}</span>
        </template>
        <!-- mjIntro -->
        <template slot-scope="{ row, index }" slot="mjIntro">
          <Input type="text" v-model="modifymajor.mjIntro" v-if="editIndex === index" />
          <span v-else>{{ row.mjIntro }}</span>
        </template>
        <!-- mjType -->
        <template slot-scope="{ row, index }" slot="mjType">
          <Select v-model="modifymajor.mjType" v-if="editIndex === index" transfer>
            <Option value="基础科段">基础科段</Option>
            <Option value="专科段">专科段</Option>
            <Option value="本科段">本科段</Option>
            <Option value="独立本科段">独立本科段</Option>
          </Select>
          <span v-else>{{ row.mjType }}</span>
        </template>
        <!-- mjLevel -->
        <template slot-scope="{ row, index }" slot="mjLevel">
          <Select v-model="modifymajor.mjLevel" v-if="editIndex === index" transfer>
            <Option value="博士">博士</Option>
            <Option value="硕士">硕士</Option>
            <Option value="本科">本科</Option>
            <Option value="专科">专科</Option>
          </Select>
          <span v-else>{{ row.mjLevel }}</span>
        </template>
        <!-- mjExamform -->
        <template slot-scope="{ row, index }" slot="mjExamform">
          <Select v-model="modifymajor.mjExamform" v-if="editIndex === index" transfer>
            <Option value="面向社会">面向社会</Option>
            <Option value="面向高校">面向高校</Option>
          </Select>
          <span v-else>{{ row.mjExamform }}</span>
        </template>
        <!-- mjStopnbes -->
        <template slot-scope="{ row, index }" slot="mjStopnbes">
          <Input type="text" v-model="modifymajor.mjStopnbes" v-if="editIndex === index" />
          <span v-else>{{ row.mjStopnbes }}</span>
        </template>
        <!-- mjStopes -->
        <template slot-scope="{ row, index }" slot="mjStopes">
          <Input type="text" v-model="modifymajor.mjStopes" v-if="editIndex === index" />
          <span v-else>{{ row.mjStopes }}</span>
        </template>
        <!-- mjStopreges -->
        <template slot-scope="{ row, index }" slot="mjStopreges">
          <Input type="text" v-model="modifymajor.mjStopreges" v-if="editIndex === index" />
          <span v-else>{{ row.mjStopreges }}</span>
        </template>
        <!-- mjStopregnum -->
        <template slot-scope="{ row, index }" slot="mjStopregnum">
          <Input type="text" v-model="modifymajor.mjStopregnum" v-if="editIndex === index" />
          <span v-else>{{ row.mjStopregnum }}</span>
        </template>
        <!-- mjStopawdip -->
        <template slot-scope="{ row, index }" slot="mjStopawdip">
          <DatePicker
            @on-change="modifymajor.mjStopawdip=$event"
            type="date"
            placeholder="选择日期"
            v-if="editIndex === index"
            transfer
          />
          <span v-else>{{ row.mjStopawdip }}</span>
        </template>
        <!-- mjStopawnum -->
        <template slot-scope="{ row, index }" slot="mjStopawnum">
          <Input type="text" v-model="modifymajor.mjStopawnum" v-if="editIndex === index" />
          <span v-else>{{ row.mjStopawnum }}</span>
        </template>
        <!-- mjTotalcredit -->
        <template slot-scope="{ row, index }" slot="mjTotalcredit">
          <Input type="text" v-model="modifymajor.mjTotalcredit" v-if="editIndex === index" />
          <span v-else>{{ row.mjTotalcredit }}</span>
        </template>
        <!-- mjGradcredit -->
        <template slot-scope="{ row, index }" slot="mjGradcredit">
          <Input type="text" v-model="modifymajor.mjGradcredit" v-if="editIndex === index" />
          <span v-else>{{ row.mjGradcredit }}</span>
        </template>
        <!-- mjTotalcourse -->
        <template slot-scope="{ row, index }" slot="mjTotalcourse">
          <Input type="text" v-model="modifymajor.mjTotalcourse" v-if="editIndex === index" />
          <span v-else>{{ row.mjTotalcourse }}</span>
        </template>
        <!-- mjIfdiv -->
        <template slot-scope="{ row, index }" slot="mjIfdiv">
          <Select v-model="modifymajor.mjIfdiv" v-if="editIndex === index" transfer>
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
          <span v-else>{{ row.mjIfdiv }}</span>
        </template>
        <!-- mjRegexplain -->
        <template slot-scope="{ row, index }" slot="mjRegexplain">
          <Input type="text" v-model="modifymajor.mjRegexplain" v-if="editIndex === index" />
          <span v-else>{{ row.mjRegexplain }}</span>
        </template>
        <!-- mjGradexplain -->
        <template slot-scope="{ row, index }" slot="mjGradexplain">
          <Input type="text" v-model="modifymajor.mjGradexplain" v-if="editIndex === index" />
          <span v-else>{{ row.mjGradexplain }}</span>
        </template>
        <!-- mjRemark -->
        <template slot-scope="{ row, index }" slot="mjRemark">
          <Input type="text" v-model="modifymajor.mjRemark" v-if="editIndex === index" />
          <span v-else>{{ row.mjRemark }}</span>
        </template>
        <!-- 修改按钮 -->
        <template slot-scope="{ row, index }" slot="action">
          <div v-if="editIndex === index">
            <Button
              @click="handleSave(row,index)"
              size="small"
              style="background-color:#2b85e4;color:white; border-color: #2b85e4"
            >保存</Button>
            <Button
              @click="editIndex = -1"
              size="small"
              style="background-color:#2b85e4;color:white; border-color: #2b85e4"
            >取消</Button>
          </div>
          <div v-else>
            <Button
              @click="modify(row, index)"
              size="small"
              style="background-color:#2b85e4;color:white; border-color: #2b85e4"
            >修改专业信息</Button>
          </div>
        </template>
      </Table>
    </div>
    <br />
    <div>
      <div class="buttonMenu">
        <Upload ref="upload" :action="$host + '/professional/management/importExcel'">
          <Button style="margin-right: 8px;" type="success">
            <Icon size="18" type="ios-cloud-upload-outline" />导入
          </Button>
        </Upload>
      </div>
      <div class="buttonMenu">
        <Button style="margin-right: 8px">
          <Icon size="18" type="ios-download-outline" />
          <a
            :href="$host + '/professional/management/allSCProvinceMajor2ExportExcel'"
            style="color: #515A6E"
          >导出</a>
        </Button>
      </div>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import majorinfo from "./MajorInfo.vue";
export default {
  data() {
    return {
      columnshead: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "专业编码",
          key: "mjId",
          width: 150,
          fixed: "left",
          sortable: true
        },
        {
          title: "专业名称",
          slot: "mjName",
          width: 150,
          fixed: "left"
        },
        {
          title: "专业状态",
          key: "mjState",
          width: 150,
          filters: [
            {
              label: "正常",
              value: 1
            },
            {
              label: "停考",
              value: 2
            },
            {
              label: "即将停考",
              value: 3
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 1) {
              return row.mjState == "正常";
            } else if (value === 2) {
              return row.mjState == "停考";
            } else {
              return row.mjState == "即将停考";
            }
          }
        },
        {
          title: "计划版本",
          key: "mvId",
          width: 150
        },
        {
          title: "专业大类",
          key: "mcId",
          width: 150
        },
        {
          title: "国家专业代码",
          key: "nmId",
          width: 150
        },
        {
          title: "第一主考院校",
          key: "mjFirstexaminer",
          width: 150
        },
        {
          title: "专业简介",
          slot: "mjIntro",
          width: 150
        },
        {
          title: "专业类型",
          slot: "mjType",
          width: 150
        },
        {
          title: "学历层次",
          slot: "mjLevel",
          width: 150
        },
        {
          title: "开考形式",
          slot: "mjExamform",
          width: 150
        },

        {
          title: "首次开考考次",
          key: "mjFirstes",
          width: 150
        },
        {
          title: "批准文号",
          key: "mjApprnum",
          width: 150
        },
        {
          title: "停止新生注册考次",
          slot: "mjStopnbes",
          width: 150
        },
        {
          title: "停止注册文号",
          slot: "mjStopes",
          width: 150
        },
        {
          title: "停止报考考次",
          slot: "mjStopreges",
          width: 150
        },
        {
          title: "停止报考文号",
          slot: "mjStopregnum",
          width: 150
        },
        {
          title: "停止颁发毕业证日期",
          slot: "mjStopawdip",
          width: 150
        },
        {
          title: "停止颁发文号",
          slot: "mjStopawnum",
          width: 150
        },

        {
          title: "总学分",
          slot: "mjTotalcredit",
          width: 150
        },
        {
          title: "毕业学分",
          slot: "mjGradcredit",
          width: 150
        },
        {
          title: "总课程数",
          slot: "mjTotalcourse",
          width: 150
        },
        {
          title: "是否分方向",
          slot: "mjIfdiv",
          width: 150
        },
        {
          title: "报考条件说明",
          slot: "mjRegexplain",
          width: 150
        },
        {
          title: "毕业条件说明",
          slot: "mjGradexplain",
          width: 150
        },
        {
          title: "备注",
          slot: "mjRemark",
          width: 150
        },
        {
          title: "操作",
          slot: "action",
          width: 130,
          fixed: "right",
          align: "center"
        }
      ],
      datat: [],
      total: 1,
      modal1: false,
      modal2: false,
      major: {},
      selected: [],
      record: 0,
      current: 1,
      schoolList: [],
      subjectschool: [],
      editIndex: -1,
      modifymajor: {}
    };
  },
  created() {
    this.$axios
      .get(
        this.$host + "/professional/management/allMajor?pageNum=1&&pageSize=10"
      )
      .then(res => {
        this.total = res.data.data.total;
        this.datat = res.data.data.list;
      });
    this.$axios
      .get(this.$host + "/school/allSchools?pageNum=1&&pageSize=99999")
      .then(res => {
        this.schoolList = res.data.data.list;
      });
  },
  components: { majorinfo },
  methods: {
    changePage(currentPage) {
      this.$axios
        .get(
          this.$host +
            "/professional/management/allMajor?pageNum=" +
            currentPage +
            "&&pageSize=10"
        )
        .then(res => {
          this.datat = res.data.data.list;
          this.current = currentPage;
        });
    },
    getMajor(major) {
      this.major = major;
    },
    addMajor() {
      this.$axios
        .post(this.$host + "/professional/management/newMajor", this.major)
        .then(res => {
          if (res.data.message == "添加专业成功") {
            this.$Message.success("添加专业成功");
            if (this.datat.length == 10) {
              this.datat.pop();
            }
            var obj = this.major; //解决相同对象覆盖问题
            this.datat.unshift(obj);
            this.total++;
          } else this.$Message.error("添加专业失败");
        });
    },
    initmodal2() {
      this.modal2 = true;
      this.subjectschool = [];
    },
    Selected(selection) {
      this.selected = selection;
    },
    Active(selected) {
      var i = 0;
      this.record = 0;
      var postchange = [];
      for (i in selected) {
        postchange.push({
          majorId: selected[i].mjId,
          state: "正常"
        });
        this.record++;
      }
      this.$axios
        .put(this.$host + "/professional/management/majorState", {
          jsonArray: postchange
        })
        .then(res => {
          if (res.data.message.substr(0, 4) == "修改成功") {
            this.$Notice.success({
              title: "启用成功",
              desc: "成功启用" + this.record + "个专业"
            });
            this.$axios
              .get(
                this.$host +
                  "/professional/management/allMajor?pageNum=" +
                  this.current +
                  "&&pageSize=10"
              )
              .then(res => {
                this.datat = res.data.data.list;
              });
          } else {
            this.$Notice.error({
              title: "启用失败",
              desc: ""
            });
          }
        });
    },
    willStop(selected) {
      var i = 0;
      this.record = 0;
      var postchange = [];
      for (i in selected) {
        postchange.push({
          majorId: selected[i].mjId,
          state: "即将停考"
        });
        this.record++;
      }
      this.$axios
        .put(this.$host + "/professional/management/majorState", {
          jsonArray: postchange
        })
        .then(res => {
          if (res.data.message.substr(0, 4) == "修改成功") {
            this.$Notice.success({
              title: "即将停考",
              desc: this.record + "个专业即将停考"
            });
            this.$axios
              .get(
                this.$host +
                  "/professional/management/allMajor?pageNum=" +
                  this.current +
                  "&&pageSize=10"
              )
              .then(res => {
                this.datat = res.data.data.list;
              });
          } else {
            this.$Notice.error({
              title: "即将停考失败",
              desc: ""
            });
          }
        });
    },
    Stop(selected) {
      var i = 0;
      this.record = 0;
      var postchange = [];
      for (i in selected) {
        postchange.push({
          majorId: selected[i].mjId,
          state: "停考"
        });
        this.record++;
      }
      this.$axios
        .put(this.$host + "/professional/management/majorState", {
          jsonArray: postchange
        })
        .then(res => {
          if (res.data.message.substr(0, 4) == "修改成功") {
            this.$Notice.success({
              title: "停考",
              desc: this.record + "个专业已停考"
            });
            this.$axios
              .get(
                this.$host +
                  "/professional/management/allMajor?pageNum=" +
                  this.current +
                  "&&pageSize=10"
              )
              .then(res => {
                this.datat = res.data.data.list;
              });
          } else {
            this.$Notice.error({
              title: "停考失败",
              desc: ""
            });
          }
        });
    },
    setSubjectSchool(subjectschool, selected) {
      var i = 0;
      var j = 0;
      var postschool = [];
      this.record = 0;
      for (i in selected) {
        for (j in subjectschool) {
          postschool.push({
            majorId: selected[i].mjId,
            majorPlanVersionId: selected[i].mvId,
            schoolId: this.subjectschool[j]
          });
        }
        this.record++;
        this.$axios
          .post(this.$host + "/professional/management/subjectSchool", {
            jsonArray: postschool
          })
          .then(res => {
            if (res.data.message.substr(22, 23) == "成功\n") {
              this.$Notice.success({
                title: "设置成功",
                desc: this.record + "个专业主考院校设置成功"
              });
              this.$axios
                .get(
                  this.$host +
                    "/professional/management/allMajor?pageNum=" +
                    this.current +
                    "&&pageSize=10"
                )
                .then(res => {
                  this.datat = res.data.data.list;
                });
            } else {
              this.$Notice.error({
                title: "设置失败失败",
                desc: ""
              });
            }
          });
      }
    },
    modify(row, index) {
      this.modifymajor.mjName = row.mjName;
      this.modifymajor.mjIntro = row.mjIntro;
      this.modifymajor.mjType = row.mjType;
      this.modifymajor.mjLevel = row.mjLevel;
      this.modifymajor.mjExamform = row.mjExamform;
      this.modifymajor.mjStopnbes = row.mjStopnbes;
      this.modifymajor.mjStopes = row.mjStopes;
      this.modifymajor.mjStopreges = row.mjStopreges;
      this.modifymajor.mjStopregnum = row.mjStopregnum;
      this.modifymajor.mjStopawdip = row.mjStopawdip;
      this.modifymajor.mjStopawnum = row.mjStopawnum;
      this.modifymajor.mjTotalcredit = row.mjTotalcredit;
      this.modifymajor.mjGradcredit = row.mjGradcredit;
      this.modifymajor.mjTotalcourse = row.mjTotalcourse;
      this.modifymajor.mjIfdiv = row.mjIfdiv;
      this.modifymajor.mjRegexplain = row.mjRegexplain;
      this.modifymajor.mjGradexplain = row.mjGradexplain;
      this.modifymajor.mjRemark = row.mjRemark;
      this.editIndex = index;
    },
    handleSave(row, index) {
      row.mjName = this.modifymajor.mjName;
      row.mjIntro = this.modifymajor.mjIntro;
      row.mjType = this.modifymajor.mjType;
      row.mjLevel = this.modifymajor.mjLevel;
      row.mjExamform = this.modifymajor.mjExamform;
      row.mjStopnbes = this.modifymajor.mjStopnbes;
      row.mjStopes = this.modifymajor.mjStopes;
      row.mjStopreges = this.modifymajor.mjStopreges;
      row.mjStopregnum = this.modifymajor.mjStopregnum;
      row.mjStopawdip = this.modifymajor.mjStopawdip;
      row.mjStopawnum = this.modifymajor.mjStopawnum;
      row.mjTotalcredit = this.modifymajor.mjTotalcredit;
      row.mjGradcredit = this.modifymajor.mjGradcredit;
      row.mjTotalcourse = this.modifymajor.mjTotalcourse;
      row.mjIfdiv = this.modifymajor.mjIfdiv;
      row.mjRegexplain = this.modifymajor.mjRegexplain;
      row.mjGradexplain = this.modifymajor.mjGradexplain;
      row.mjRemark = this.modifymajor.mjRemark;
      this.editIndex = -1;
      var putMajor = JSON.parse(JSON.stringify(row)); //深度复制，不然delete索引会错误
      this.$delete(putMajor, "_index");
      this.$delete(putMajor, "_rowKey");
      this.$axios
        .put(this.$host + "/professional/management/major", putMajor)
        .then(res => {
          if (res.data.message == "修改专业信息成功") {
            this.$Message.success("修改成功");
          } else {
            this.$Message.success("修改失败");
          }
        });
    },
  }
};
</script>